<template>
	<view class="pc_clickEffect">
		<template v-for="(item, index) in effects">
			<view class="clickEffect" :style="item.style" v-if="item.visible" :key="index">
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: 'pc-clickEffect',
		props: {
			size: {
				type: [String, Number],
				default: '120'
			},
			timeout: {
				type: [String, Number],
				default: '800'
			},
			globalClickVoice: {
				type: String,
				default: ''
			},
			globalEffectUrl: {
				type: String,
				default: ''
			},

		},
		data() {
			return {
				// globalClickVoice: "https://cdn.osisx.com/game/audio/262e712c9b92479abf946fa1566cc538.wav",
				// globalEffectUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9bf59fd8f3e04b2f9e6532722c7376b9.gif",
				audioContext: null,
				idCounter: 0,
				ismove: false,
				effects: [],
				removalQueue: [], // 移除队列
			};
		},

		computed: {
			aniDuration() {
				return this.timeout / 1000 + 's'
			}
		},

		mounted() {},

		methods: {
			clearEffect() {
				this.effects = []
				this.removalQueue = []
				this.idCounter = 0

			},
			randomTime() {
				const randomParam = new Date().getTime();
				return randomParam
			},
			initAudio() {
				return new Promise((resolve, reject) => {
					this.audioContext = uni.createInnerAudioContext()
					this.audioContext.src = this.globalClickVoice
				})
			},
			handlePlayClickVoice() {
				if (!this.audioContext) {
					this.initAudio().then(res => {
						this.audioContext.play()
					})
				} else {
					this.audioContext.stop()
					this.audioContext.play()
				}
			},
			getRandomImage() {
				let imageList = this.imageList
				if (!imageList || imageList.length === 0) {
					return null; // 如果数组为空，返回 null
				}
				const randomIndex = Math.floor(Math.random() * imageList.length);
				return imageList[randomIndex];
			},
			handleTouchStart(e) {
				// 处理点击事件
				const clientX = e.touches[0].clientX;
				const clientY = e.touches[0].clientY;
				this.createEffect(clientX, clientY);
			},
			createEffect(clientX, clientY, isMove = false) {
				// console.log("当前的资源是", this.globalEffectUrl, this.globalClickVoice)
				if (this.globalClickVoice) {
					this.handlePlayClickVoice()
				}
				// let icon = this.getRandomImage()
				let icon = this.globalEffectUrl

				let styleStart
				if (icon && icon !== '') {
					if (String(icon).includes("gif")) {
						let time = this.randomTime()
						icon = icon + `?time=${time}`
					}
					this.$emit("flyNowIcon", icon)
					const size = uni.upx2px(Number(this.size));
					styleStart =
						`display: block; position: fixed; z-index: 999; pointer-events: none; width: ${size}px; height: ${size}px; background-image: url(${icon}); background-size:contain ;background-repeat: no-repeat; left: ${clientX - Number(this.size) / 4}px; top: ${clientY - Number(this.size) / 4}px;animation-duration:${this.aniDuration}!important ;`;
					let obj = {
						style: styleStart,
						id: this.idCounter++,
						visible: true
					}
					this.effects.push(obj);
					setTimeout(() => {
						this.handleRemoveEffect(obj.id)
					}, this.timeout);
				}

			},
			handleRemoveEffect(effectId) {
				// 找到对应的特效并设置为不可见
				const effect = this.effects.find(e => e.id === effectId);
				if (effect) {
					this.removalQueue.push(effectId); // 将要移除的特效 ID 加入队列
					this.processRemovalQueue(); // 处理移除队列
				}
			},
			processRemovalQueue() {
				// 如果没有待移除特效，结束处理
				if (this.removalQueue.length === 0) return;
				const effectId = this.removalQueue[0]; // 获取队列中的第一个特效 ID
				const index = this.effects.findIndex(e => e.id === effectId);
				if (index !== -1) {
					this.effects[index].visible = false
				}
				this.removalQueue.shift(); // 移除队列中的第一个元素
				this.processRemovalQueue(); // 递归处理下一个
			},



		}
	}
</script>

<style lang="scss">
	.pc_clickEffect {
		pointer-events: none;
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 999999999999999;

		.clickEffect {

			// animation: mAnimation 0.8s forwards;
		}

		.hideAniMation {
			animation: none
		}

		@keyframes mAnimation {
			0% {
				transform: scale(0.1) rotate(40deg);
				/* 从小到大，保持旋转 */
				opacity: 1;
				/* 可见 */
			}

			30% {
				transform: scale(1)rotate(0deg);
				/* 停顿在正常大小 */
				opacity: 1;
				/* 可见 */
			}

			70% {
				transform: scale(1)rotate(0deg);
				/* 放大到3倍 */
				opacity: 1;
				/* 可见 */
			}

			100% {
				transform: scale(2);
				/* 保持3倍大小 */
				opacity: 0;
				/* 不可见 */
			}
		}
	}
</style>